<template>
    <div class="header">
        <!-- 折叠按钮 -->
        <div class="collapse-btn" @click="collapseChage">
            <i class="el-icon-menu"></i>
        </div>
        <div class="title">点点管理系统</div>
        <div class="header-right">
            <div class="header-user-con">
                <!-- 全屏显示 -->
                <div class="btn-fullscreen" @click="handleFullScreen">
                    <el-tooltip effect="dark" :content="fullscreen?`取消全屏`:`全屏`" placement="bottom">
                        <i class="el-icon-rank"></i>
                    </el-tooltip>
                </div>
                <!-- 消息中心 -->
                <div class="btn-bell">
                    <el-tooltip effect="dark" :content="message?`有${message}条未读消息`:`消息中心`" placement="bottom">
                        <i class="el-icon-bell" @click="tongZhi"></i>
                    </el-tooltip>
                    <span class="btn-bell-badge" v-if="message"></span>
                </div>
                <!-- 用户头像 -->
                <div class="user-avator"><img src="../../assets/img/img.jpg"></div>
                <span style="font-size:14px;padding-left:5px;">{{jgname}}</span>
                <!-- 用户名下拉菜单 -->
                <el-dropdown class="user-name" trigger="click" @command="handleCommand">
                    <span class="el-dropdown-link">
                        {{username}} <i class="el-icon-caret-bottom"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <a target="_blank" @click="updatePwd()">
                            <el-dropdown-item icon="el-icon-lx-settings">修改密码</el-dropdown-item>
                        </a>
                        <a target="_blank" @click="contactWe()">
                            <el-dropdown-item icon="el-icon-lx-service">联系我们</el-dropdown-item>
                        </a>
                        <el-dropdown-item divided command="loginout" icon="el-icon-lx-exit">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                <!-- 联系我们弹出框 -->
                <el-dialog title="联系我们" :visible.sync="contactWeVisible" width="30%" :before-close="handleDialogClose">
                    <el-form ref="form" :model="data" label-width="80px">
                        <el-form-item label="所属公司">
                            <el-input v-model="data.gsName" onfocus=this.blur()></el-input>
                        </el-form-item>
                        <el-form-item label="联系电话">
                            <el-input v-model="data.gsPhone" onfocus=this.blur()></el-input>
                        </el-form-item>
                        <el-form-item label="单位地址">
                            <el-input v-model="data.gsAddress" onfocus=this.blur()></el-input>
                        </el-form-item>
                    </el-form>
                </el-dialog>
                <!-- 修改密码弹出框 -->
                <el-dialog title="修改密码" :visible.sync="updateVisible" width="30%" :before-close="handleDialogClose">
                    <el-form ref="form" :model="form" label-width="80px">
                        <el-form-item label="ID" v-if="show">
                            <el-input v-model="form.user_pk"></el-input>
                        </el-form-item>
                        <el-form-item label="姓名">
                            <el-input v-model="form.user_name" onfocus=this.blur()></el-input>
                        </el-form-item>
                        <el-form-item label="登录名">
                            <el-input v-model="form.user_loginname" onfocus=this.blur()></el-input>
                        </el-form-item>
                        <el-form-item label="原密码">
                            <el-input type="password" v-model="form.user_password"></el-input>
                        </el-form-item>
                        <el-form-item label="新密码">
                            <el-input type="password" v-model="form.user_password1"></el-input>
                        </el-form-item>
                        <el-form-item label="确认密码">
                            <el-input type="password" v-model="form.user_password2"></el-input>
                        </el-form-item>
                    </el-form>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="newPwdQuXiao">取 消</el-button>
                        <el-button type="primary" @click="saveNewPwd">确 定</el-button>
                    </span>
                </el-dialog>
                <!-- 消息弹出框 -->
                <el-dialog title="通知公告" :visible.sync="tongZhiVisible" width="30%" :before-close="handleDialogClose">
                    <div class="block">
                        <el-carousel height="300px">
                            <el-carousel-item v-for="item in tzLength" :key="item" align="center">
                                <h3>{{item.notice_title}}</h3>
                                <div style="width:100%;height:213px;overflow:auto;">{{item.notice_content}}</div><br>
                                <el-button type="primary" icon="el-icon-lx-skin" @click="upTongZhi(item.notice_pk)">标记已读</el-button>
                            </el-carousel-item>
                        </el-carousel>
                    </div>
                </el-dialog>
            </div>
        </div>
    </div>
</template>
<script>
    import bus from '../common/bus';
    export default {
        data() {
            return {
                collapse: false,
                fullscreen: false,
                message: '',
                tzLength:[],
                show:'',
                updateVisible: false,
                contactWeVisible: false,
                tongZhiVisible: false,
                url_upPwd: '/auth/user/updatePwd',
                url_tzgg: '/auth/notice/pages',
                url_tzggSave: '/auth/tzgg/saveYw',
                data:{
                    gsName:'万达信息股份有限公司',
                    gsPhone:'18997268062',
                    gsAddress:'青海省人力资源和社会保障厅621室',
                },
                form: {
                    user_pk: '',
                    user_name: '',
                    user_loginname: '',
                    user_password: '',
                    user_password1: '',
                    user_password2: '',

                    notice_title:'',
                    notice_content:'',
                    notice_time:'',
                    notice_person:'',
                    user_id:'',
                    notice_pk:'',
                    notice_status:'',
                    page:'1',//第几页
                    limit:'10'//每页条数，默认10条
                },
            }
        },
        computed:{
            username(){
                let username = localStorage.getItem('ms_userName');
                return username ? username : this.name;
            },
            jgname(){
                let jgname = localStorage.getItem('ms_organName');
                return jgname ? jgname : this.name;
            }
        },
        created() {
            this.form.user_id = localStorage.getItem('ms_userPk');
            this.$post(this.url_tzgg,this.form).then(res => {
                if(res.code=="success"){
                    this.message = res.data.length;
                    this.tzLength = res.data;
                }
                else if(res.code=="fail"){
                    this.$message({
                        type : res.code,
                        message: res.msg,
                    });
                }
            })
        },
        methods:{
            tongZhi(){
                this.tongZhiVisible = true;
            },
            //标记为已读
            upTongZhi(id_pk){
                this.form.user_id = localStorage.getItem('ms_userPk');
                this.form.notice_id = id_pk;
                this.form.notice_status = "1";
                this.$post(this.url_tzggSave,this.form).then(res => {
                    if(res.code=="success"){
                        this.form = {};
                        this.form.user_id = localStorage.getItem('ms_userPk');
                        this.$post(this.url_tzgg,this.form).then(res => {
                            if(res.code=="0"){
                                this.message = res.data.list.length;
                                this.tzLength = res.data.list;
                            }
                            else if(res.code=="fail"){
                                this.$message({
                                    type : res.code,
                                    message: res.msg,
                                });
                            }
                        })
                    }
                    else if(res.code=="fail"){
                        this.$message({
                            type : res.code,
                            message: res.msg,
                        });
                    }
                })
            },
            /*联系我们*/
            contactWe(){
                this.contactWeVisible = true;
            },
            /*修改密码*/
            updatePwd(){
                this.updateVisible = true;
                this.form = {
                    user_pk: localStorage.getItem('ms_userPk'),
                    user_name:localStorage.getItem('ms_userName'),
                    user_loginname: localStorage.getItem('ms_loginName'),
                    user_password:'',
                    user_password1:'',
                    user_password2:'',
                };
             },
            //右上角关闭事件
            handleDialogClose(){
                this.updateVisible = false;
                this.contactWeVisible = false;
                this.tongZhiVisible = false;
            },
            /*修改保存密码*/
            saveNewPwd(){
                if(this.form.user_password !== ""){
                    if(this.form.user_password1!=="" && this.form.user_password2!=""){
                        if(this.form.user_password1 === this.form.user_password2){
                            this.form.user_password = this.form.user_password+","+this.form.user_password1;
                            this.$post(this.url_upPwd,this.form).then(res => {
                                /*密码修改成功跳转到登陆页面*/
                                if(res.code==="success"){
                                    this.handleCommand('loginout');
                                }
                                else if(res.code==="fail"){
                                    this.$message({
                                        type : res.code,
                                        message: res.msg,
                                    });
                                }
                                this.updateVisible = false;
                            })
                        }else{
                            this.$message({
                                type : '',
                                message: "两次输入的密码不一致",
                            });
                        }
                    }else{
                        this.$message({
                            type : '',
                            message: "请填写新密码并确认",
                        });
                    }
                }else{
                    this.$message({
                        type : '',
                        message: "原密码不能为空",
                    });
                }
            },
            /*取消*/
            newPwdQuXiao() {
                this.updateVisible = false;
                this.contactWeVisible = false;
            },
            // 用户名下拉菜单选择事件
            handleCommand(command) {
                if(command == 'loginout'){
                    localStorage.removeItem('ms_username')
                    this.$router.push('/');
                }
            },
            // 侧边栏折叠
            collapseChage(){
                this.collapse = !this.collapse;
                bus.$emit('collapse', this.collapse);
            },
            // 全屏事件
            handleFullScreen(){
                let element = document.documentElement;
                if (this.fullscreen) {
                    if (document.exitFullscreen) {
                        document.exitFullscreen();
                    } else if (document.webkitCancelFullScreen) {
                        document.webkitCancelFullScreen();
                    } else if (document.mozCancelFullScreen) {
                        document.mozCancelFullScreen();
                    } else if (document.msExitFullscreen) {
                        document.msExitFullscreen();
                    }
                } else {
                    if (element.requestFullscreen) {
                        element.requestFullscreen();
                    } else if (element.webkitRequestFullScreen) {
                        element.webkitRequestFullScreen();
                    } else if (element.mozRequestFullScreen) {
                        element.mozRequestFullScreen();
                    } else if (element.msRequestFullscreen) {
                        // IE11
                        element.msRequestFullscreen();
                    }
                }
                this.fullscreen = !this.fullscreen;
            }
        },
        mounted(){
            if(document.body.clientWidth < 1500){
                this.collapseChage();
            }
        }
    }
</script>
<style scoped>
    .header {
        position: relative;
        box-sizing: border-box;
        width: 100%;
        height: 70px;
        font-size: 22px;
        color: #fff;
    }
    .collapse-btn{
        float: left;
        padding: 0 21px;
        cursor: pointer;
        line-height: 70px;
    }
    .header .title{
        float: left;
        width:350px;
        line-height: 70px;
    }
    .header-right{
        float: right;
        padding-right: 50px;
    }
    .header-user-con{
        display: flex;
        height: 70px;
        align-items: center;
    }
    .btn-fullscreen{
        transform: rotate(45deg);
        margin-right: 5px;
        font-size: 24px;
    }
    .btn-bell, .btn-fullscreen{
        position: relative;
        width: 30px;
        height: 30px;
        text-align: center;
        border-radius: 15px;
        cursor: pointer;
    }
    .btn-bell-badge{
        position: absolute;
        right: 0;
        top: -2px;
        width: 8px;
        height: 8px;
        border-radius: 4px;
        background: #f56c6c;
        color: #fff;
    }
    .btn-bell .el-icon-bell{
        color: #fff;
    }
    .user-name{
        margin-left: 10px;
    }
    .user-avator{
        margin-left: 20px;
    }
    .user-avator img{
        display: block;
        width:40px;
        height:40px;
        border-radius: 50%;
    }
    .el-dropdown-link{
        color: #fff;
        cursor: pointer;
    }
    .el-dropdown-menu__item{
        text-align: center;
    }
</style>
